<div class="dform">
  <form [formGroup]="form" class="form">
    <hydro-input-text
      class="metric__name"
      name="metricName"
      label="Metric Name"
      formControlName="name"
      bordered="true"
    >
    </hydro-input-text>
    <ng-container
      *ngIf="
        form.get('name').dirty &&
          form
            .get('name')
            .getError('format');
        let error
      "
    >
      <ul class="error__list metric__error-list">
        <li class="error__item">
          {{ error }}
        </li>
      </ul>
    </ng-container>
    <div>
      <hs-metric-spec-config
        class="config"
        [parent]="form"
        [models]="models$ | async"
        [modelVersions]="modelVersions$ | async"
      >
      </hs-metric-spec-config>
    </div>
  </form>
  <div class="buttons">
    <button hs-button (click)="onClose()" hsAutofocused>
      cancel
    </button>
    <button
      hs-button
      kind="flat"
      color="primary"
      [disabled]="!form.valid"
      (click)="onSubmit()"
    >
      Add Metric
    </button>
  </div>
</div>

